<template>
  <div class="child-container">
    <h3>子组件区域</h3>

    <!-- 显示父组件传来的内容 -->
    <div class="received-box">
      <p class="label">来自父组件的消息：</p>
      <div class="content-box">{{ parentMessage }}</div>
    </div>

    <!-- 子组件输入区域 -->
    <div class="input-area">
      <p class="label">发送给父组件：</p>
      <input
          v-model="childInput"
          placeholder="输入要发送的内容"
          @keyup.enter="sendToParent"
      >
      <button @click="sendToParent">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 接收父组件传递的数据
const props = defineProps({
  parentMessage: String
})

// 定义要触发的事件
const emit = defineEmits(['childMessage'])

// 子组件输入内容
const childInput = ref('')

// 发送消息给父组件
const sendToParent = () => {
  if (childInput.value.trim()) {
    emit('childMessage', childInput.value)
    childInput.value = ''
  }
}
</script>

<style scoped>
.child-container {
  border: 2px solid #4CAF50;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8fff8;
}

.received-box, .input-area {
  margin: 15px 0;
}

.label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #2E7D32;
}

.content-box {
  padding: 10px;
  background-color: #E8F5E9;
  border-radius: 4px;
  min-height: 20px;
}

input {
  padding: 8px;
  width: 70%;
  border: 1px solid #81C784;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #388E3C;
}
</style>